<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定时器</title>
		<style>
			div {
				background-color: red;
				height: 100px;
				width: 100px;
				position: absolute;
				left: 0;
				top: 0;
			}

			button {
				margin: 100px;
			}
		</style>
	</head>
	<body>
		<div></div>
		<button>移动</button>

		<script>
			let oBtn = document.querySelector('button')
			let oDiv = document.querySelector('div')
			// 1000/60  
			
			
		// 	alert(6666666)
			
		// 	setTimeout(()=>{
		// 		console.log(555);
		// 	},2000)
			
			
		// 	console.log(6666666666);
		
			
			oBtn.onclick = function() {
				// oDiv.style.backgroundColor = 'green'
				// oDiv.style.left = '100px'
				oDiv.style.transform = 'translateX(100px)'
				
			}
			
		
			
		</script>



		<!-- 
		一，回调函数
			
		
		二，定时 执行 某个 函数
		1.setTimeOut-----延时执行 某个 函数   只执行一次
			let time1 = setTimeOut(funuction(){
				console.log(执行的代码'')
			},1000)  
			
			清除定时器的方法
			clearTimerOut(time1)
		2.setInterval-----定时执行  某个函数  执行无数次
			let time2 = setInterval(funuction(){
				console.log(执行的代码'')
			},1000)
			
			清除定时器的方法
			clearInterval(time2)
		3.requestAnimationFrame-----延时执行 某个 函数   只执行一次 ，延时的时间 贴合浏览器刷新时间（只有几毫秒） 主要用于做动画
			let time3 = requestAnimationFrame(funuction(){
				console.log(执行的代码'')
			})
			清除定时器的方法
			cancelAnimationFrame(time3)
			setInterval 定时执行  某个函数
		
		4.任务队列.
		同步任务  瞬间能执行完毕的代码
		异步任务   执行需要一定时间的代码
		因为js是单线程,为了防止异步任务 阻塞后续代码的运行,所以js提供了一个任务队列
		
		https://www.bilibili.com/video/BV1K4411D7Jb?spm_id_from=333.1007.top_right_bar_window_default_collection.content.click&vd_source=1a56e48c63d7ce008832492049f44156
		 -->
	</body>
</html>